import React from 'react'
import {TabBar } from 'antd-mobile'
import styles from './index.less'
import Icon from '../Icon'
import { useLocation, useNavigate } from 'umi'
export default function MyTabbar() {
  const location = useLocation();
  const navigate = useNavigate();
  // 点击跳转路由
  const switchRoute = (key: string) => {
    navigate(key)
  }
  const tabs = [
    {
      key: '/home',
      title: (active:boolean) => (
        <span style={{color: active?'#e93323':'#333'}}>首页</span>
      ),
      icon: (active:boolean) => (
        <Icon name='shouye1' size={22} color={active?'#e93323':'#333'}/>
      )
    },
    {
      key: '/cate',
      title: (active:boolean) => (
        <span style={{color: active?'#e93323':'#333'}}>分类</span>
      ),
      icon: (active:boolean) => (
        <Icon name='fenlei' size={22} color={active?'#e93323':'#333'}/>
      )
    },
    {
      key: '/cart',
      title: (active:boolean) => (
        <span style={{color: active?'#e93323':'#333'}}>购物车</span>
      ),
      icon: (active:boolean) => (
        <Icon name='gouwuche' size={22} color={active?'#e93323':'#333'}/>
      )
    },
    {
      key: '/user',
      title: (active:boolean) => (
        <span style={{color: active?'#e93323':'#333'}}>我的</span>
      ),
      icon: (active:boolean) => (
        <Icon name='wode' size={22} color={active?'#e93323':'#333'}/>
      )
    },
  ]
  return (
    <div className={styles['tab-container']}>
      <TabBar 
        activeKey={location.pathname}
        onChange={
          switchRoute
        }>
          {tabs.map(item => (
            <TabBar.Item 
              key={item.key} 
              icon={item.icon} 
              title={item.title} 
            />
          ))}
        </TabBar>
    </div>
  )
}
